<!DOCTYPE html>
<html lang="en">
<head>
    <title>注册</title>

    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="Portal - Bootstrap 5 Admin Dashboard Template For Developers">
    <meta name="author" content="Xiaoying Riley at 3rd Wave Media">
    <link rel="shortcut icon" href="/assets/favicon.ico">

    <script defer src="/assets/js/jquery-2.1.4.js"></script>
    <!-- FontAwesome JS-->
    <script defer src="/assets/plugins/fontawesome/js/all.min.js"></script>

    <!-- App CSS -->
    <link id="theme-style" rel="stylesheet" href="/assets/css/portal.css">

</head>

<body class="app app-signup p-0">
<div class="row g-0 app-auth-wrapper">
    <div class="col-12 col-md-7 col-lg-6 auth-main-col text-center p-5">
        <div class="d-flex flex-column align-content-end">
            <div class="app-auth-body mx-auto">
                <div class="app-auth-branding mb-4">
                    <a class="app-logo" href="index">
                        <img class="logo-icon me-2" src="/assets/images/app-logo.svg" alt="logo">
                    </a>
                </div>
                <h2 th:if="${perm.equals('user')}" class="auth-heading text-center mb-4">注册账号</h2>
                <h2 th:if="${perm.equals('admin')}" class="auth-heading text-center mb-4">注册管理员账号</h2>
                <div class="auth-form-container text-start mx-auto">
                    <div class="auth-form auth-signup-form">
                        <div class="email mb-3">
                            <label class="sr-only" for="signup-name">名称</label>
                            <input id="signup-name" name="name" type="text" class="form-control signup-name"
                                   placeholder="名称" required="required">
                        </div>
                        <div class="email mb-3">
                            <label class="sr-only" for="signup-account">账号</label>
                            <input id="signup-account" name="account" type="text"
                                   class="form-control signup-email"
                                   placeholder="账号" required="required">
                        </div>
                        <div class="password mb-3">
                            <label class="sr-only" for="signup-password">密码</label>
                            <input id="signup-password" name="password" type="password"
                                   class="form-control signup-password" placeholder="密码" required="required">
                        </div>
                        <input style="display: none" id="perm" th:value="${perm}">
                        <div class="text-center">
                            <button onclick="signup()" class="btn app-btn-primary w-100 theme-btn mx-auto">注册</button>
                        </div>
                        <div class="auth-option text-center pt-5">已经有账号? <a class="text-link" href="/ms/login">登录</a>
                        </div>
                    </div><!--//auth-form-container-->
                </div><!--//auth-body-->
            </div><!--//flex-column-->
        </div><!--//auth-main-col-->
    </div><!--//row-->
    <div class="col-12 col-md-5 col-lg-6 h-100 auth-background-col">
        <div class="auth-background-holder">
        </div>
        <div class="auth-background-mask"></div>
    </div><!--//auth-background-col-->
</div>
<script type="text/javascript">
    function signup() {
        var account = document.getElementById('signup-account').value
        if (account === '') {
            alert('请填写所有信息')
            return
        }
        $.ajax({
            url: '/ms/api/user/account?key=' + account,
            method: 'get',
            dataType: 'json',
            contentType: 'application/json;charset=utf-8',
            success: function (result) {
                if (result !== null) {
                    alert('账号已存在!')
                    return
                }
                var user = {}
                user['name'] = document.getElementById('signup-name').value
                user['account'] = account
                user['password'] = document.getElementById('signup-password').value
                user['perm'] = document.getElementById('perm').value
                user['face'] = '/assets/images/user.png'
                if (user['name'] === '' || user['account'] === '' || user['password'] === '') {
                    alert('请填写所有信息')
                    return
                }
                $.ajax({
                    url: '/ms/api/user',
                    method: 'post',
                    data: JSON.stringify(user),
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    success: function (res) {
                        if (res['success']) window.location = '/ms/login'
                        else alert('注册失败!!!')
                    }
                })
            }
        })
    }
</script>
</body>
</html>

